<link rel="stylesheet" href="/Public/plugin/cxColor/css/jquery.cxcolor.css">
<script src="/Public/plugin/cxColor/js/jquery.cxcolor.js"></script>
<script type="text/javascript" src="/Public/js/jquery.form.min.js"></script>
  <div class="form">
    <form method='post' id="form_do" name="form_do" action="{:U(MODULE_NAME.'/Product/sellrecommendcategoryedit',array('id'=>$id))}">
        <dl>
          <dt>分类名称：</dt>
          <dd>
            <input type="text" name="name" class="inp_w250" placeholder="10个字内"  maxlength="10" value="{$category.name}">
          </dd>
        </dl>
        <dl>
          <dt>选项卡颜色：</dt>
          <dd>
            <input type="text" name="color" class="inp_default" id="element_id"  value="{$category.color}">
          </dd>
        </dl>
        <dl>
          <dt>分类图片：</dt>
          <dd>
            <div style="width: 120px; height: 120px;  border: 1px #CCC solid;   position: relative;   overflow: hidden; text-align: center;vertical-align: middle;cursor: pointer;">
              <input type="file" name="filedata" id="recommendCategoryImg" onChange="uploadPic(this)" style="width:120px; height: 120px; position: absolute; right: 0;left: 0;bottom: 0;top: 0;margin: auto;opacity: 0;z-index: 9999">
              <div  class="fileupload" style="  position: absolute;width: 120px;height: auto;right: 0;left: 0;bottom: 0;top: 0;margin: auto;">
                  <img src='http://www.tripvip.cn{$category.img}' width='120' height='120'>
                  <input type='hidden' name='img' class='img' value='{$category.img}'>
              </div>
            </div>
          </dd>
        </dl>
        <dl>
          <dt>排序：</dt>
          <dd>
            <input type="text" name="sort" class="inp_small"  value="{$category.sort}">
          </dd>
        </dl>
        <div class="form_b" style="width: 300px; margin-left: 110px;">
          <input type="submit" class="button-green" id="submit" value="保 存">
          &nbsp;<input type="button" onClick="history.back()" class="button-return" value="返回">
        </div>
    </form>
  </div>
 <script type="text/javascript">

$(function() {
	 
  wrapForm('recommendCategoryImg','recommendCategoryImg');
  $('#element_id').cxColor();

});

function wrapForm (id,type) 
{ 

  $("#"+id).wrap("<form class='uploadImg' action='/Home/Public/uploadPic/fileType/Img/type/"+type+".html' method='post' enctype='multipart/form-data'></form>");
}
  /**
   * [uploadPic description]
   * @param  {[type]} obj [description]
   * @return {[type]}     [description]
   */
  function uploadPic(obj) 
  { 
      if($(obj).val() == "") return;
      $(obj).parent().ajaxSubmit({
          dataType:  'json',
          beforeSend: function() {
            $(obj).parent().parent().find('.fileupload').empty();
            $(obj).parent().parent().find('.fileupload').html("正在上传中...");
          },
          success: function(data) {

            if(data.state == 'SUCCESS')
            {
                $(obj).parent().parent().find('.fileupload').empty();
                $(obj).parent().parent().find('.fileupload').html("<img src='http://www.tripvip.cn"+data.url+"' width='120' height='120'>");
                $(obj).parent().parent().find('.fileupload').append("<input type='hidden' name='img' class='img' value='"+data.url+"'>");

            }
            else
            {
                $(obj).parent().parent().find('.fileupload').html(data.msg);
            }
        },
        error:function(xhr){
          $(obj).parent().parent().find('.fileupload').html('上传失败!');
          $(obj).parent().parent().find('.fileupload').html(xhr);
        }
      });
  }


</script>